<template>
  <div>
<div>
    <CategorySelector :disabled="viewName != ViewNames.LIST"></CategorySelector>
  </div>
  <div>

    <SPUList
      v-if="viewName == ViewNames.LIST"
      @change-view="changeViewHandler"
    ></SPUList>
    <SPUForm :data="spuData" v-if="viewName == ViewNames.SPU_FORM" @change-view="changeViewHandler"></SPUForm>
    <SKUForm :data="spuData" v-if="spuData && viewName == ViewNames.SKU_FORM" @change-view="changeViewHandler"></SKUForm>
  </div>
  </div>
  
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  name: "ProductSpuList",
});
</script>
<script lang="ts" setup>
// import CategorySelector from "@/components/CategorySelector/index.vue";
import myPagination from "@/hooks/pagination";
import SPUList from "./list/index.vue";
import SPUForm from "./spuForm/index.vue";
import SKUForm from "./skuForm/index.vue";
import {ViewNames} from "./index"
import type { ResSPU } from "@/api/spu";
// 定义一个变量，当前显示的视图的标记
// list: spu列表视图，spuForm：spu添加编辑视图，skuForm：sku添加编辑视图
const viewName = ref<ViewNames>(ViewNames.LIST);
// 定义一个变量，用于接受列表页面传递上来的当前待编辑spu信息
const spuData = ref<ResSPU>();

//切换视图
function changeViewHandler(v: ViewNames, data?: ResSPU) {
  viewName.value = v;
  spuData.value = data;
}


</script>

<style lang="less" scoped></style>
